import * as React from 'react';
import {observer} from 'mobx-react'
import styles from './index.scss';

import Bar3D from '../../home/Bar3D'
import circle from '../../../assets/imgs/test/circle.png'
import time from '../../../assets/imgs/test/time.png'
import cloud from '../../../assets/imgs/test/cloud.png'
import addBlue from '../../../assets/imgs/test/addBlue.png'
import {IBeforeAge} from "../../../type/firstType";

const neverResolve = new Promise(() => {
});
function Suspender({suspend}) {
    if (suspend) {
        throw neverResolve;
    } else {
        return null;
    }
}
function Preload({show, children}) {
    return (
        <React.Suspense fallback={null}>
            {children}
            <Suspender suspend={!show} />
        </React.Suspense>
    );
}
interface IProps {
    beforeAge: IBeforeAge
    beforeChartX: string[]
    beforeChartY: number[]
}

@observer
class Home extends React.Component<IProps> {

    constructor(props) {
        super(props);
    }


    public render() {
        const {beforeAge, beforeChartX, beforeChartY} = this.props
        const len = beforeChartX.length;
        //const len = 0;
        return (
            <div className={styles.twoTop}>
                <div className={styles.title}>远程连接</div>
                <div className={styles.bottom}>
                    <div className={styles.left}>
                        <div className={styles.leftTop}>
                            <div className={styles.topLeft}>
                                <div className={styles.topLeftC}>
                                    <img src={circle} className={styles.topLeftImg} />
                                </div>
                                <div>
                                    <p className={styles.topLeftNum}>{beforeAge ? beforeAge.device_num : ''}</p>
                                    <p className={styles.topLeftText}>设备总数</p>
                                </div>
                            </div>
                            <div className={styles.topRight}>
                                <div className={styles.topRightC}>
                                    <img src={time} className={styles.topRightImg} />
                                </div>
                                <div>
                                    <p className={styles.topRightNum}>{beforeAge ? beforeAge.add_log : ''}</p>
                                    <p className={styles.topRightText}>新增日志设备</p>
                                </div>
                            </div>
                        </div>
                        <div className={styles.leftBottom}>
                            <div className={styles.bottomLeft}>
                                <div className={styles.bottomLeftC}>
                                    <img src={cloud} className={styles.bottomLeftImg} />
                                </div>
                                <div>
                                    <p className={styles.bottomLeftNum}>{beforeAge ? beforeAge.overtime_log : ''}</p>
                                    <p className={styles.bottomLeftText}>连接超期设备</p>
                                </div>
                            </div>
                            <div className={styles.bottomRight}>
                                <div className={styles.bottomRightC}>
                                    <img src={addBlue} className={styles.bottomRightImg} />
                                </div>
                                <div>
                                    <p className={styles.bottomRightNum}>{beforeAge ? beforeAge.log_num : ''}</p>
                                    <p className={styles.bottomRightText}>远程连接设备数</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className={styles.right}>
                        <Preload show={!len}>
                            <div className={styles.noData}>日志上传正常</div>
                        </Preload>
                        <Preload show={len}>
                            <Bar3D dataX={beforeChartX} dataY={beforeChartY} />
                        </Preload>
                        
                    </div>
                </div>
            </div>
        );
    }
}

export default Home;
